<template>
  <ZZDialog class="myself" title="实体属性" @close="onClose()">
    <div class="context">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="属性" width="150" />
        <el-table-column prop="value" label="值" width="180" />
      </el-table>
    </div>
  </ZZDialog>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
import ZZDialog from '@/common/ZZDialog.vue';
import { useViewer } from '@/stores/viewer';

let viewer: any;

const tableData = reactive<any[]>([]);

function showProperty(obj: any, params: any) {
  tableData.length = 0;
  console.log(params);
  for (const key in obj) {
    if (key != 'geometry' && !key.startsWith('_')) {
      tableData.push({
        name: key,
        value: obj[key]
      });
    }
  }
}

onMounted(() => {
  viewer = useViewer().viewer;
  viewer.zz.pickOper.setCallBack(showProperty);
  viewer.zz.pickOper.enable();
});

const onClose = function () {
  viewer.zz.pickOper.cleanHighlight();
  viewer.zz.pickOper.setCallBack(undefined);
  viewer.zz.pickOper.disable();
};
</script>

<style scoped>
.myself {
  position: absolute;
  left: 10px;
  top: 600px;
  min-width: 100px;
  height: auto;
}

.context {
  overflow-y: auto;
  height: 280px;
}
</style>
